/**
 * @desc：关联订单号弹窗
 * @author:binlety
 *
 *
 * * */
import React, { useState, useEffect } from "react";
import { Button, Modal, message } from "antd";
import IconFont from "@/components/IconFont";
import { useNavigate } from "react-router-dom";
import CommonModal from "@/components/CommonModal";
import CommonTable from "@/components/CommonTable";
import CommonLoading from "@/components/CommonLoading";
import { getRelativeOrderOp, exprotForTab6RelativeOp, exprotForTab7RelativeOp } from "../service";
import { formatAmount } from "@/utils/utils.jsx";

export default ({ type, visible, handleClose }) => {
	const [loading, setLoading] = useState(false); //loading
	const [data, setData] = useState([]); //表格数据
	const navigate = useNavigate();
	useEffect(() => {
		if (visible) {
			getRelativeOrderSn(); //获取关联订单号
		}
	}, [visible]);

	//获取关联订单号
	const getRelativeOrderSn = async () => {
		setLoading(true);
		const { success, data } = await getRelativeOrderOp(visible, { type: type == "7" ? 1 : undefined });
		if (success) {
			setData(data);
		}
		setLoading(false);
	};

	//渲染跳转去页面去订单处理页面的span
	const renderJumptOrderHandle = orderSn => {
		return (
			<span
				className="common-color1"
				style={{ cursor: "pointer" }}
				onClick={() => publicHandleClick("/views/order/list", orderSn)}
			>
				{orderSn}
			</span>
		);
	};

	//公共跳转逻辑
	const publicHandleClick = (pathname, orderSn) => {
		onCancel();
		let timer = setTimeout(() => {
			clearTimeout(timer);
			timer = null;
			navigate(pathname, { state: { orderSn } });
		}, 200);
	};

	const columns = [
		{
			title: "业务订单号",
			dataIndex: "orderSn",
			key: "orderSn",
			render: text => {
				return renderJumptOrderHandle(text);
			}
		},
		{
			title: "变动金额",
			dataIndex: "amount",
			key: "amount",
			render: text => {
				if (text) {
					if (text.toString().includes("-")) {
						return <span className="common-color10">{formatAmount(text)}</span>;
					} else {
						return <span className="common-color9">+{formatAmount(text)}</span>;
					}
				} else {
					return "0.00";
				}
			}
		}
	];

	//表格
	const TableProps = {
		data,
		columns
	};

	//关闭操作
	const onCancel = () => {
		// setData([]) //加上展示效果不好，明显有等待时长
		handleClose();
	};

	//导出
	const handleExport = async () => {
		if (!data?.length) {
			return message.info("暂无可导出的数据！");
		}
		setLoading(true);
		let res;
		if (type == 6) {
			res = await exprotForTab6RelativeOp({ id: visible });
		} else {
			res = await exprotForTab7RelativeOp({ id: visible });
		}
		const { success } = res || {};
		setLoading(false);
		if (success) {
			Modal.confirm({
				className: "views-modal-confirm",
				centered: true,
				icon: <IconFont type="iconchenggong" />,
				title: <span className="common-color10">成功提示</span>,
				content: (
					<div>
						您的文件正在导出中 <br />
						可以去“任务中心”查看导出进度和结果！
					</div>
				),
				okText: "去查看",
				cancelText: "关闭",
				onOk() {
					navigate(`/basic/taskCenter`);
				}
			});
		}
	};

	return (
		<CommonModal
			title="关联订单号"
			visible={visible}
			width="560px"
			onCancel={onCancel}
			footer={[
				<Button onClick={onCancel} key="close">
					关闭
				</Button>
			]}
		>
			<div style={{ textAlign: "right", marginBottom: "8px" }}>
				<Button onClick={handleExport}>导出</Button>
			</div>
			<CommonTable {...TableProps} />
			<CommonLoading loading={loading} />
		</CommonModal>
	);
};
